<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>时间过滤器</title>
    <script src="./lib/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="container"></div>

    <!-- 1. 引入模板引擎库 -->
    <script type="text/html" id="dateTemp">
      {{dateTime | Forem}}
    </script>

    <script>
      template.defaults.imports.Forem = (date) => {
        let y = date.getFullYear();
        let m = (date.getMonth() + 1).toString().padStart(2,0);
        let d = (date.getDate()).toString().padStart(2,0);
        return `${y}-${m}-${d}`;
      };

      // 2. 定义数据
      let data = {
        dateTime: new Date(),
      };

      // 3. 调用template方法,渲染到页面
      let result = template("dateTemp", data);
      $("#container").html(result);
    </script>
  </body>
</html>
